<template>
  <div class="container">
    <van-nav-bar fixed title="首页" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in carouselList" :key="item.id">
        <img
          style="height: 30vh"
          class="banner-img"
          :src="`http://124.223.14.236:8060/${item.advimgsrc}`"
          :alt="item.advimgdesc"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 通知 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 热门推荐 -->
    <van-cell>
      <h3 slot="title" class="group-title">热门推荐</h3>
    </van-cell>

    <recommend-list :list="hotList" />
    <!-- 最近更新 -->
    <van-cell>
      <h3 slot="title" class="group-title">最近更新</h3>
      <span
        >24小时： <b>{{ num_day }}篇</b></span
      >
      /
      <span
        >1周： <b>{{ num_week }}篇</b></span
      >
    </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="别划拉了，到底了🤑🤑🤑"
      :error.sync="isErr"
      error-text="出错了，点我永生"
      @load="getList"
    >
      <article-list v-for="item in indexList" :key="item.id" :item="item" />
    </van-list>
  </div>
</template>
<script>
import RecommendList from "../components/recommend-list.vue";
import { getCateListApi, getHotApi, getIndexApi } from "../api/index";
export default {
  components: { RecommendList },
  data() {
    return {
      hotList: [],
      indexList: [],
      carouselList: [],
      loading: false,
      finished: false,
      page: 1,
      isErr: false,
      num_day: 0,
      num_week: 0,
    };
  },
  created() {
    this.getHot();
  },
  methods: {
    async getHot() {
      // 获取热门推荐
      const {
        data: { list },
      } = await getHotApi();
      // console.log(list);
      this.hotList = list;
      // 获取轮播图
      const {
        data: { banner },
      } = await getCateListApi();
      // console.log(banner);
      this.carouselList = banner;
    },
    async getList() {
      try {
        const {
          data: {
            num_day,
            num_week,
            list: { count, data },
          },
        } = await getIndexApi({ page: this.page, limit: 10 });
        // console.log(list);
        this.indexList.push(...data);
        this.num_day = num_day;
        this.num_week = num_week;
        this.indexList.length >= count ? (this.finished = true) : this.page++;
      } catch (err) {
        this.isErr = true;
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
<style scoped lang="less">
.banner-img {
  width: 100%;
}
.group-title {
  color: #1989fa;
}
</style>
